<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:visible'])

// 弹出框的显示与隐藏
const dialogVisible = ref<boolean>(props.visible)

watch(() => props.visible, (val) => {
  dialogVisible.value = val
})
watch(() => dialogVisible.value, (val) => {
  emits('update:visible', val)
})
</script>

<template>
  <a-modal v-model:open="dialogVisible" :mask-closable="false" v-bind="$attrs">
    <slot name="content" />
    <template #footer>
      <slot name="footer" />
    </template>
  </a-modal>
</template>

<style lang="less" scoped></style>
